<template>
    <div class="container mt20 mb70 detail" v-if="playListInfo">
        <h2 class="flex justify-between">
            <span>{{playListInfo.name}}</span>
            <small class="font-normal font-12">标签: <i v-for="item in playListInfo.tags" :key='item'>{{item}} |</i></small>
        </h2>
        <div class='description'>{{playListInfo.description}}</div>
        <div class="shareCount text-right">
            <span>播放次数: {{playListInfo.playCount}}</span> 
            <span>分享次数: {{playListInfo.shareCount}}</span>  
            <span>评论次数: {{playListInfo.commentCount}}</span>
        </div>
        <!-- <audio :src="url" autoplay @timeupdate="playing"></audio> -->
        <ul class="songList mt20">
            <li>
                <span></span>
                <span>歌曲标题</span>
                <span>时长</span>
                <span>歌手</span>
                <span>专辑</span>
            </li>
            <li v-for="(item,index) in playList" :key="index" :data-id='item.id'  @click="selfPlay($event,index)" class="flex align-center">
                <span><img v-lazy="item.al.picUrl" alt=""></span>
                <span><router-link to='/'>{{item.name}}</router-link></span>
                <span>时长</span>
                <span>{{item.ar[0].name}}</span>
                <span>专辑</span>
            </li>
        </ul>
    </div>
</template>

<script>
import request from "./../../network/request"
export default {
    data() {
        return {
            playListInfo:null,
            playList:null,
            // songUrlList:null,
            url:'',
            song_index:0
        }
    },
    async mounted(){// 下一次结果依赖上一次  async/await异步解决方案
        var route=this.$route
        var id=route.query.id//获取到歌单id
        var trackIds=await request({url:route.path,params:{id:id}}).then(res=>{//通过歌单id取 所有曲目id
                    console.log(res.data.playlist);
                    this.playListInfo=res.data.playlist
                    return res.data.playlist.trackIds//获取所有曲目id 并返回 
                })
        var songs=await new Promise((resolve)=>{// 利用曲目id获取所有曲目
            var str=[]
            trackIds.forEach(item=>{
                str.push(item.id)
            })
            request({url:`/song/detail?ids=${str}`}).then(res=>{//请求曲目接口 获取所有曲目
                this.playList=res.data.songs
                console.log(res.data.songs,777);
                resolve(res.data.songs)// 返回当前歌单下 所有曲目
            })
        })
        await new Promise((resolve)=>{//利用曲目id获取 曲目url
            var str=[]
            songs.forEach(item=>{//找到所有曲目id
                str.push(item.id)
            })
            request({url:`/song/url?id=${str}`}).then(res=>{//请求获取曲目url接口
                // this.songUrlList=res.data.data
                this.playList.forEach((item,index)=>{
                    Object.assign(item,{url:res.data.data[index].url})//改变所有曲目对象 新增url属性
                })
                // console.log(this.songUrlList,99);
            })
        })
    },
    methods:{
        selfPlay(e,idx){// 播放当前这首歌
            this.song_index=idx
            this.url=this.playList[idx].url
            this.$store.commit('setPlayListInfo',{playList:this.playList,idx:idx})
        },
    }
}
</script>

<style lang="scss" scope>
    .detail{
        h2{
            color: #333;
        }
        .description{
            margin-top: 10px;
            line-height: 20px;
        }
        .songList{
            li{
                padding: 0 0 10px;
                margin: 10px 0;
                border-bottom: 1px solid #f1f1f1;
                display: flex;
                justify-content: space-between;
                span{
                    &:nth-child(1){flex-basis: 70px;}
                    &:nth-child(2){flex-basis: 200px;}
                    &:nth-child(3){flex-basis: 100px;}
                    &:nth-child(4){flex-basis: 100px;}
                    &:nth-child(5){flex-basis: 200px;}
                }
            }
        }
        img{
            width: 50px;
            height: 50px;
            margin-right: 20px;
            border-radius: 50%;
        }
    }
</style>